<template>
    <div class="login">
        <el-form ref="loginForm" :model="form" label-width="0px" :rules="rules" size="large">
            <el-form-item
                prop="username"
                inline-message
                class="animate__animated animate__bounceInRight"
            >
                <el-input v-model="form.username" placeholder="用户名" clearable
                    ><template #prefix>
                        <el-icon>
                            <IEpUser></IEpUser>
                        </el-icon> </template
                ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="animate__animated animate__bounceInLeft">
                <el-input
                    v-model="form.password"
                    type="password"
                    placeholder="密码"
                    clearable
                    show-password
                    ><template #prefix>
                        <el-icon>
                            <IEpLock></IEpLock>
                        </el-icon> </template
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="identifyCode"
                class="identifyCode animate__animated animate__zoomInUp"
                style="animation-duration: 800ms"
            >
                <el-input v-model="form.identifyCode" placeholder="验证码" clearable
                    ><template #prefix>
                        <el-icon>
                            <IEpkey></IEpkey>
                        </el-icon>
                    </template>
                    <template #append>
                        <identity></identity>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item
                class="animate__animated animate__zoomInUp"
                style="animation-duration: 1000ms"
            >
                <el-switch
                    v-model="form.remember"
                    size="default"
                    inline-prompt
                    active-text="是"
                    inactive-text="否"
                    style="--el-switch-on-color: #626aef"
                />
                <span>记住密码</span>
                <el-button
                    type="primary"
                    @click="resetForm(loginForm)"
                    link
                    style="margin-left: 10%"
                    >重置</el-button
                >
                <el-button
                    type="primary"
                    link
                    v-router="{ path: '/login' }"
                    style="margin-left: 20%"
                    >忘记密码？</el-button
                >
            </el-form-item>
            <el-form-item
                class="animate__animated animate__zoomInUp"
                style="animation-duration: 1200ms"
            >
                <el-button
                    type="primary"
                    class="submit"
                    color="#626aef"
                    @click="submitForm(loginForm)"
                    >登录</el-button
                >
            </el-form-item>
            <el-form-item>
                <el-button size="small">
                    人脸识别
                    <el-icon><IMdiFaceRecognition></IMdiFaceRecognition></el-icon>
                </el-button>

                <el-button size="small"
                    >二维码登录 <el-icon><ICarbonQrCode></ICarbonQrCode></el-icon
                ></el-button>
                <el-button size="small" @click=""
                    >手机登录
                    <el-icon><IEpIphone></IEpIphone></el-icon>
                </el-button>
            </el-form-item>
        </el-form>
        <el-divider>第三方登录</el-divider>
        <div class="otherlogin animate__animated animate__fadeIn">
            <el-icon :size="25"><IAntDesignWechatOutlined></IAntDesignWechatOutlined></el-icon>
            <el-icon :size="25"><IAntDesignQqOutlined></IAntDesignQqOutlined></el-icon>
            <el-icon :size="25"
                ><IAntDesignAlipayCircleOutlined></IAntDesignAlipayCircleOutlined
            ></el-icon>
            <el-icon :size="25"><ISimpleIconsGitee></ISimpleIconsGitee> </el-icon>
            <el-icon :size="25"><IAntDesignGithubOutlined></IAntDesignGithubOutlined></el-icon>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    // name:'login'
};
</script>
<script setup lang="ts">
import { FormInstance } from "element-plus/es";
import identity from "../../components/identity.vue";
import { useDheader } from "../../store/Dheader";
const Dheader = useDheader();
const router = useRouter();
const form = reactive({
    username: "",
    password: "",
    identifyCode: "",
    remember: false
});

const loginForm = ref<FormInstance>();
const validateName = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error("用户名不能为空！"));
    }
    // callback();
    value == "1" ? callback() : callback(new Error("用户名不存在！"));
};

const validatePass = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error("密码不能为空！"));
    }
    // callback();
    value == "123" ? callback() : callback(new Error("密码错误！"));
};

const validateCode = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error("请输入验证码！"));
    }
    value === Dheader.header.row1.login.identifyCode
        ? callback()
        : callback(new Error("验证码错误！"));
};
const rules = reactive({
    username: [{ validator: validateName, trigger: "blur" }],
    password: [{ validator: validatePass, trigger: "blur" }],
    identifyCode: [{ validator: validateCode, trigger: "blur" }]
});

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            router.replace({ path: "/home" });
            formEl.resetFields();
            console.log("登录成功!");
        } else {
            console.log("登录失败!");
            // ElMessage({
            //   type: "error",
            //   message: "用户名或密码错误！",
            //   duration: 500,
            // });
            return false;
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>
<style scoped lang="scss">
.login {
    position: absolute;
    width: 100%;
    height: 90%;
    background-color: rgba(255, 255, 255, 0.837);
    transition: all 0.5s ease;

    .el-form {
        padding: 50px;
        height: 60%;

        .identifyCode {
            :deep(.el-input-group__append) {
                padding: 0px;
            }
        }

        .submit {
            width: 100%;
            height: 20px;
        }
    }

    // :deep .el-form-item__content {
    //   margin: 0px !important;
    //   width: 300px;
    // }
    .otherlogin {
        display: flex;

        .el-icon {
            flex: 1;
            transition: all 0.66s;

            &:hover {
                color: rgb(144, 207, 255);
            }
        }
    }
}
</style>
